<template>
  <div class="add-medicine-man-container">
    <!-- 因为小程序包的原因，不得不再写一遍，直接调用原来的组件 主包会变大，所以此处有要改的需要修改两处 dzWeb/dzPrescriptionDrug/medicineMan -->

    <van-popup v-model="visible" :position="position" :style="{ height, width: '100%' }" @close="closeClick" @click.stop="">
      <div class="medicine-man-container">
        <div class="header">
          <a
            @click="closeClick"
            href="javascript:;"
            class="btn-back">
            <span class="icon-back"></span>
          </a>
          <span>{{headerTitle}}</span>
        </div>
        <div class="content-container">
          <section class="medicine-man-info">
            <section class="medicine-man-info-line">
              <section class="medicine-man-info-form">
                <section class="cell-label">
                  <label style="color:red;">*</label>用药人姓名
                </section>
                <section class="cell-value">
                  <input type="text"
                        v-model="medicine_man_data.real_name"
                        placeholder="用药人真实姓名" />
                </section>
              </section>
            </section>
            <section class="medicine-man-info-line">
              <section class="medicine-man-info-form">
                <section class="cell-label">
                  <label v-if="prescription_consultation_dz == 1" style="color:red;">*</label>身份证号
                </section>
                <section class="cell-value">
                  <input type="text"
                        v-model="medicine_man_data.id_no"
                        placeholder="身份证号" />
                </section>
              </section>
            </section>
            <section class="medicine-man-info-line">
              <section class="medicine-man-info-form">
                <section class="cell-label">
                  <label style="color:red;">*</label>性别
                </section>
                <section class="cell-value">
                  <van-radio-group  v-model="medicine_man_data.gender" icon-size="16" color="#CCCCCC" checked-color="#FA5C03" direction="horizontal">
                    <div class="freight-radio-box">
                      <van-radio class="freight-radio" :name="1">男</van-radio>
                      <van-radio class="freight-radio" :name="2">女</van-radio>
                    </div>
                  </van-radio-group>
                </section>
              </section>
            </section>
            <section class="medicine-man-info-line">
              <section class="medicine-man-info-form">
                <section class="cell-label">
                  <label style="color:red;">*</label>关系
                </section>
                <section class="cell-value" @click="showRelation()"> {{ medicine_man_data.relation_name }}</section>
              </section>
            </section>
            <section class="medicine-man-info-line">
              <section class="medicine-man-info-form">
                <section class="cell-label">
                  <label style="color:red;">*</label>手机号码
                </section>
                <section class="cell-value">
                  <input type="number"
                        v-model="medicine_man_data.phone"
                        placeholder="用于医生电话回拨或短信提醒" />
                </section>
              </section>
            </section>
            <section class="medicine-man-info-line">
              <section class="medicine-man-info-form">
                <section class="cell-label">疾病史</section>
                <section class="cell-value" @click="clickDiseasesInput"> {{ diseases_history_f }}</section>
              </section>
            </section>
          </section>
        </div>
        <div class="msettlement_sub">
          <div class="btn gra-btn" @click="saveMedicalPatient">保存用药人信息</div>
          <div class="btn return-btn" @click="closeClick">返回</div>
        </div>
      </div>
    </van-popup>
    <van-popup v-model="showPicker"
      class="add-diseases-history"
      round
      position="bottom"
      :closeable="true"
      :style="{ height: '70%', width: '100%' }"
      @close="closeRelation"
    >
      <div class="title">选择关系</div>
      <div class="picker-release">
        <div class="relation-list" v-for="item in relation" :class="relationSave.index == item.index ? 'color' : ''" :key="item.index" @click="relationClick(item)">{{ item.name }}</div>
      </div>
      <div class="btn-add-disease" @click="saveRelation">完成</div>
    </van-popup>
    <van-popup v-model="showDiseasesPop"
      class="add-diseases-history"
      round
      :style="{ height: '70%', width: '100%' }"
      position="bottom"
      :closeable="true"
      @close="DiseasesPopClose"
    >
       <div class="title">疾病史</div>
       <section class="medicine-man-info">
          <section class="medicine-man-info-line">
            <section class="medicine-man-info-form">
              <section class="cell-label">过往病史</section>
              <section class="cell-value">
                <van-radio-group v-model="disease_history.past_medical_history_status" icon-size="16" color="#CCCCCC" checked-color="#FA5C03" direction="horizontal">
                  <div class="freight-radio-box right">
                    <van-radio class="freight-radio" :name="1">有</van-radio>
                    <van-radio class="freight-radio" :name="2">无</van-radio>
                  </div>
                </van-radio-group>
              </section>
            </section>
            <div class="adaptation-disease-wrapper" v-if="disease_history.past_medical_history_status == 1">
              <div 
                v-for="(item, index) in disease_history.past_medical_history" 
                :key="index" 
                :class="['adaptation-disease', item.selected == 1 ? 'selected' : '']" 
                @click="selectAdaptationDisease(index, 'past_medical')"
              >{{ item.name }}</div>
              <div class="add-adaptation-disease" @click="addDisease('past_medical_history')">＋</div>
            </div>
          </section>
          <section class="medicine-man-info-line">
            <section class="medicine-man-info-form">
              <section class="cell-label">过敏史</section>
              <section class="cell-value">
                <van-radio-group v-model="disease_history.allergic_history_status" icon-size="16" color="#CCCCCC" checked-color="#FA5C03" direction="horizontal">
                  <div class="freight-radio-box right">
                    <van-radio class="freight-radio" :name="1">有</van-radio>
                    <van-radio class="freight-radio" :name="2">无</van-radio>
                  </div>
                </van-radio-group>
              </section>
            </section>
            <div class="adaptation-disease-wrapper" v-if="disease_history.allergic_history_status == 1">
              <div 
                v-for="(item, index) in disease_history.allergic_history" 
                :key="index" 
                :class="['adaptation-disease', item.selected == 1 ? 'selected' : '']" 
                @click="selectAdaptationDisease(index, 'allergic')"
              >{{ item.name }}</div>
              <div class="add-adaptation-disease" @click="addDisease('allergic_history')">＋</div>
            </div>
          </section>
          <section class="medicine-man-info-line">
            <section class="medicine-man-info-form">
              <section class="cell-label">家族病史</section>
              <section class="cell-value">
                <van-radio-group v-model="disease_history.family_medical_history_status" icon-size="16" color="#CCCCCC" checked-color="#FA5C03" direction="horizontal">
                  <div class="freight-radio-box right">
                    <van-radio class="freight-radio" :name="1">有</van-radio>
                    <van-radio class="freight-radio" :name="2">无</van-radio>
                  </div>
                </van-radio-group>
              </section>
            </section>
            <div class="adaptation-disease-wrapper" v-if="disease_history.family_medical_history_status == 1">
              <div 
                v-for="(item, index) in disease_history.family_medical_history" 
                :key="index" 
                :class="['adaptation-disease', item.selected == 1 ? 'selected' : '']" 
                @click="selectAdaptationDisease(index, 'family_medical')"
              >{{ item.name }}</div>
              <div class="add-adaptation-disease" @click="addDisease('family_medical_history')">＋</div>
            </div>
          </section>
          <section class="medicine-man-info-line">
            <section class="medicine-man-info-form">
              <section class="cell-label">肝功能</section>
              <section class="cell-value">
                <van-radio-group v-model="disease_history.liver_function" icon-size="16" color="#CCCCCC" checked-color="#FA5C03" direction="horizontal">
                  <div class="freight-radio-box right">
                    <van-radio class="freight-radio" :name="1">正常</van-radio>
                    <van-radio class="freight-radio" :name="2">异常</van-radio>
                  </div>
                </van-radio-group>
              </section>
            </section>
          </section>
          <section class="medicine-man-info-line">
            <section class="medicine-man-info-form">
              <section class="cell-label">肾功能</section>
              <section class="cell-value">
                <van-radio-group v-model="disease_history.renal_function" icon-size="16" color="#CCCCCC" checked-color="#FA5C03" direction="horizontal">
                  <div class="freight-radio-box right">
                    <van-radio class="freight-radio" :name="1">正常</van-radio>
                    <van-radio class="freight-radio" :name="2">异常</van-radio>
                  </div>
                </van-radio-group>
              </section>
            </section>
          </section>
          <section class="medicine-man-info-line">
            <section class="medicine-man-info-form">
              <section class="cell-label">妊娠哺育</section>
              <section class="cell-value">
                <van-radio-group v-model="disease_history.pregnancy_and_lactation" icon-size="16" color="#CCCCCC" checked-color="#FA5C03" direction="horizontal">
                  <div class="freight-radio-box right">
                    <van-radio class="freight-radio" :name="1">有</van-radio>
                    <van-radio class="freight-radio" :name="2">无</van-radio>
                  </div>
                </van-radio-group>
              </section>
            </section>
            <div class="adaptation-disease-wrapper" v-if="disease_history.pregnancy_and_lactation == 1">
              <div 
                v-for="(item, index) in disease_history.pregnancy_status" 
                :key="index" 
                :class="['adaptation-disease', item.selected == 1 ? 'selected' : '']" 
                @click="selectAdaptationDisease(index, 'pregnancy')"
              >{{ item.name }}</div>
            </div>
          </section>
       </section>
       <div class="btn-add-disease" @click="saveMedicalHistory">完成</div>
    </van-popup>
    <!-- 添加病史 -->
    <van-popup 
      v-model="show_add_disease" 
      position="bottom"
      :round="true"
      :closeable="true"
      :style="{ height: '70%' }" 
      class="add_disease"
    >
      <div class="title">{{ show_add_disease_title }}</div>
      <div class="input-cell">
        <input type="text" :placeholder="show_add_disease_title" v-model="add_disease">
      </div>
      <div class="btn-add-disease" @click="diseaseAddBtn">添加</div>
    </van-popup>
  </div>
</template>

<script>
import Vue from 'vue'
import { Popup, RadioGroup, Radio, DatetimePicker } from 'vant'
Vue.use(Popup)
Vue.use(RadioGroup)
Vue.use(Radio)
Vue.use(DatetimePicker)
import { formatDay } from '@/utils/index'
import { IdentityCodeValid, validateMobile, validLength } from '@/utils/validate'
import { MedicalPatientSave } from '@/api/dz/dzPrescriptionDrug'
export default {
  name: 'index',
  components: {},
  data() {
    return {
      medicine_man_data: {},
      disease_history: {},
      // 疾病史
      diseases_history_f: '', // 疾病史格式化后文案
      showDiseasesPop: false,
      show_add_disease: false, // 添加疾病弹层
      medical_type: '',
      add_disease: '',
      show_add_disease_title: '添加病史',
      diseases_ration: '点击选择关系',
      showPicker: false,
      relationSave: {}
    }
  },
  props: {
    relation: {
      type: Array,
      default: () => { return [] }
    },
    visible: {
      type: Boolean,
      default: false
    },
    medicalPatientData: {
      type: Object,
      default: () => { return {} }
    },
    headerTitle: {
      type: String,
      default: '添加用药人'
    },
    prescription_consultation_dz: {
      type: Number,
      default: 0
    },
    height: {
      type: String,
      default: '100%'
    },
    position: {
      type: String,
      default: 'right'
    }
  },
  watch: {
    medicalPatientData(val) {
      this.medicine_man_data = JSON.parse(JSON.stringify(val))
      const newObj = JSON.parse(JSON.stringify(val))
      this.disease_history = {
        past_medical_history_status: newObj.past_medical_history_status, // 过往病史状态(1: 2:无)
        past_medical_history: newObj.past_medical_history, // 	过往病史
        allergic_history_status: newObj.allergic_history_status, // 	过敏史状态(1:有 2:无)
        allergic_history: newObj.allergic_history, // 	过敏史
        family_medical_history_status: newObj.family_medical_history_status, // 	家族病史状态(1:有 2:无)
        family_medical_history: newObj.family_medical_history, // 	家族病史
        liver_function: newObj.liver_function, // 	肝功能(1:正常 2:异常)
        renal_function: newObj.renal_function, // 	肾功能(1:正常 2:异常)
        pregnancy_and_lactation: newObj.pregnancy_and_lactation, // 妊娠哺乳(1:有 2:无)
        pregnancy_status: newObj.pregnancy_status // 	妊娠状态(1:备孕中 2:怀孕中 3:正在哺乳)
      }
      this.formatDiseasesHistory()
    }
  },
  methods: {
    // 格式化疾病史
    formatDiseasesHistory() {
      let str = ''
      if (
        this.medicine_man_data.past_medical_history_status == 2 &&
        this.medicine_man_data.allergic_history_status == 2 &&
        this.medicine_man_data.family_medical_history_status == 2 &&
        this.medicine_man_data.liver_function == 1 &&
        this.medicine_man_data.renal_function == 1 &&
        this.medicine_man_data.pregnancy_and_lactation == 2
      ) {
        str = '无过往病史、过敏史、家族病史、肝肾异常、妊娠'
      } else {
        let medical_history = []
        if (this.medicine_man_data.past_medical_history_status == 1) {
          medical_history = []
          this.medicine_man_data.past_medical_history.map(item => {
            if (item.selected == 1) {
              medical_history.push(item.name)
            }
          })
          str += '过往病史：' + medical_history.join('、') + '；'
        }
        if (this.medicine_man_data.allergic_history_status == 1) {
          medical_history = []
          this.medicine_man_data.allergic_history.map(item => {
            if (item.selected == 1) {
              medical_history.push(item.name)
            }
          })
          str += '过敏史：' + medical_history.join('、') + '；'
        }
        if (this.medicine_man_data.family_medical_history_status == 1) {
          medical_history = []
          this.medicine_man_data.family_medical_history.map(item => {
            if (item.selected == 1) {
              medical_history.push(item.name)
            }
          })
          str += '家族病史：' + medical_history.join('、') + '；'
        }
        if (this.medicine_man_data.liver_function == 2) {
          str += '肝功能异常；'
        }
        if (this.medicine_man_data.renal_function == 2) {
          str += '肾功能异常；'
        }
        if (this.medicine_man_data.pregnancy_and_lactation == 1) {
          medical_history = []
          this.medicine_man_data.pregnancy_status.map(item => {
            if (item.selected == 1) {
              medical_history.push(item.name)
            }
          })
          str += '妊娠哺乳：' + medical_history.join('、') + '；'
        }
      }
      this.diseases_history_f = str
    },
    closeClick() {
      this.$emit('close')
    },
    formatTime(time) {
      const t = time.getTime()
      return formatDay(t)
    },
    // 输入疾病史
    clickDiseasesInput(e) {
      this.showDiseasesPop = true
    },
    // 保存关系
    closeRelation() {
      this.showPicker = false
      this.relationSave = {
        index: this.medicine_man_data.relation,
        name: this.medicine_man_data.relation_name
      }
    },
    showRelation() {
      this.showPicker = true
      this.relationSave = {
        index: this.medicine_man_data.relation,
        name: this.medicine_man_data.relation_name
      }
    },
    relationClick(item) {
      this.relationSave = item
    },
    saveRelation() {
      if (!this.relationSave.index) {
        this.$Error('请选择关系')
        return false
      }
      this.medicine_man_data.relation = this.relationSave.index
      this.medicine_man_data.relation_name = this.relationSave.name
      this.showPicker = false
    },
    // 保存病史
    saveMedicalHistory() {
      if (this.disease_history.past_medical_history_status == 1 && !this.disease_history.past_medical_history.some(item => item.selected == 1)) {
        this.$Error('请选择过往病史')
        return false
      }
      if (this.disease_history.allergic_history_status == 1 && !this.disease_history.allergic_history.some(item => item.selected == 1)) {
        this.$Error('请选择过敏史')
        return false
      }
      if (this.disease_history.family_medical_history_status == 1 && !this.disease_history.family_medical_history.some(item => item.selected == 1)) {
        this.$Error('请选择家族病史')
        return false
      }
      if (this.disease_history.pregnancy_and_lactation == 1 && !this.disease_history.pregnancy_status.some(item => item.selected == 1)) {
        this.$Error('请选择妊娠状态')
        return false
      }
      const newObj = JSON.parse(JSON.stringify(this.disease_history))
      this.medicine_man_data.past_medical_history_status = newObj.past_medical_history_status // 过往病史状态(1: 2:无)
      this.medicine_man_data.past_medical_history = newObj.past_medical_history // 	过往病史
      this.medicine_man_data.allergic_history_status = newObj.allergic_history_status // 	过敏史状态(1:有 2:无)
      this.medicine_man_data.allergic_history = newObj.allergic_history // 	过敏史
      this.medicine_man_data.family_medical_history_status = newObj.family_medical_history_status // 	家族病史状态(1:有 2:无)
      this.medicine_man_data.family_medical_history = newObj.family_medical_history // 	家族病史
      this.medicine_man_data.liver_function = newObj.liver_function // 	肝功能(1:正常 2:异常)
      this.medicine_man_data.renal_function = newObj.renal_function // 	肾功能(1:正常 2:异常)
      this.medicine_man_data.pregnancy_and_lactation = newObj.pregnancy_and_lactation // 妊娠哺乳(1:有 2:无)
      this.medicine_man_data.pregnancy_status = newObj.pregnancy_status // 	妊娠状态(1:备孕中 2:怀孕中 3:正在哺乳)

      if (this.medicine_man_data.past_medical_history_status == 2) {
        this.medicine_man_data.past_medical_history.forEach(item => {
          item.selected = 0
        })
      }
      if (this.medicine_man_data.allergic_history_status == 2) {
        this.medicine_man_data.allergic_history.forEach(item => {
          item.selected = 0
        })
      }
      if (this.medicine_man_data.family_medical_history_status == 2) {
        this.medicine_man_data.family_medical_history.forEach(item => {
          item.selected = 0
        })
      }
      if (this.medicine_man_data.pregnancy_and_lactation == 2) {
        this.medicine_man_data.pregnancy_status.forEach(item => {
          item.selected = 0
        })
      }

      this.formatDiseasesHistory()
      this.showDiseasesPop = false
    },
    DiseasesPopClose() {
      const newObj = JSON.parse(JSON.stringify(this.medicine_man_data))
      this.disease_history = {
        past_medical_history_status: newObj.past_medical_history_status, // 过往病史状态(1: 2:无)
        past_medical_history: newObj.past_medical_history, // 	过往病史
        allergic_history_status: newObj.allergic_history_status, // 	过敏史状态(1:有 2:无)
        allergic_history: newObj.allergic_history, // 	过敏史
        family_medical_history_status: newObj.family_medical_history_status, // 	家族病史状态(1:有 2:无)
        family_medical_history: newObj.family_medical_history, // 	家族病史
        liver_function: newObj.liver_function, // 	肝功能(1:正常 2:异常)
        renal_function: newObj.renal_function, // 	肾功能(1:正常 2:异常)
        pregnancy_and_lactation: newObj.pregnancy_and_lactation, // 妊娠哺乳(1:有 2:无)
        pregnancy_status: newObj.pregnancy_status // 	妊娠状态(1:备孕中 2:怀孕中 3:正在哺乳)
      }
    },
    // 添加疾病
    addDisease(medical_type) {
      this.show_add_disease = true
      this.medical_type = medical_type
      this.add_disease = ''
    },
    diseaseAddBtn() {
      if (this.add_disease) {
        const reg = /^([\u4e00-\u9fa5]|[a-zA-Z0-9_\-\\\/])+$/
        if (!reg.test(this.add_disease.trim())) {
          this.$Error('只允许输入数字字母下划线')
        } else if (this.disease_history[this.medical_type].some(item => item.name === this.add_disease)) {
          this.$Error('不能添加重复的疾病')
        } else {
          this.show_add_disease = false
          this.disease_history[this.medical_type].push({
            name: this.add_disease,
            selected: 1
          })
        }
      } else {
        this.$Error('请添加疾病')
      }
    },
    selectAdaptationDisease(idx, medical) {
      if (medical === 'past_medical') { // 过往病史 多选
        this.disease_history.past_medical_history[idx].selected = this.disease_history.past_medical_history[idx].selected ? 0 : 1
      } else if (medical === 'allergic') { // 过敏史 多选
        this.disease_history.allergic_history[idx].selected = this.disease_history.allergic_history[idx].selected ? 0 : 1
      } else if (medical === 'family_medical') { // 家族病史 多选
        this.disease_history.family_medical_history[idx].selected = this.disease_history.family_medical_history[idx].selected ? 0 : 1
      } else if (medical === 'pregnancy') { // 妊娠 单选
        this.disease_history.pregnancy_status.forEach((element, index) => {
          if (index == idx) {
            element.selected = 1
          } else {
            element.selected = 0
          }
        })
      }
    },
    // 保存用药人信息
    saveMedicalPatient() {
      if (!validLength(this.medicine_man_data.real_name)) {
        this.$Error('用药人姓名不能为空')
        return false
      }
      if (!validLength(this.medicine_man_data.id_no)) {
        this.$Error('身份证号不能为空')
        return false
      }
      if (validLength(this.medicine_man_data.id_no) && !IdentityCodeValid(this.medicine_man_data.id_no)) {
        this.$Error('身份证号格式不正确')
        return false
      }
      if (!this.medicine_man_data.gender) {
        this.$Error('请输入性别')
        return false
      }
      if (!this.medicine_man_data.relation) {
        this.$Error('请选择关系')
        return false
      }
      if (!validateMobile(this.medicine_man_data.phone)) {
        this.$Error('请输入正确的手机号')
        return false
      }
      const sendData = {
        id: this.medicine_man_data.id, // 用药人id
        item_id: this.medicine_man_data.item_id, // 商品id
        real_name: this.medicine_man_data.real_name, // 真实姓名
        id_no: this.medicine_man_data.id_no, // 身份证号
        gender: this.medicine_man_data.gender, // 	性别(1:男 2:女)
        phone: this.medicine_man_data.phone, // 	手机号
        past_medical_history_status: this.medicine_man_data.past_medical_history_status, // 过往病史状态(1: 2:无)
        past_medical_history: JSON.stringify(this.medicine_man_data.past_medical_history), // 	过往病史
        allergic_history_status: this.medicine_man_data.allergic_history_status, // 	过敏史状态(1:有 2:无)
        allergic_history: JSON.stringify(this.medicine_man_data.allergic_history), // 	过敏史
        family_medical_history_status: this.medicine_man_data.family_medical_history_status, // 	家族病史状态(1:有 2:无)
        family_medical_history: JSON.stringify(this.medicine_man_data.family_medical_history), // 	家族病史
        liver_function: this.medicine_man_data.liver_function, // 	肝功能(1:正常 2:异常)
        renal_function: this.medicine_man_data.renal_function, // 	肾功能(1:正常 2:异常)
        pregnancy_and_lactation: this.medicine_man_data.pregnancy_and_lactation, // 妊娠哺乳(1:有 2:无)
        pregnancy_status: JSON.stringify(this.medicine_man_data.pregnancy_status), // 	妊娠状态(1:备孕中 2:怀孕中 3:正在哺乳)
        relation: this.medicine_man_data.relation
      }
      this.$loadingWrap.show()
      MedicalPatientSave(sendData).then(res => {
        if (res.status == 1) {
          this.$Error(res.msg)
          this.$emit('save')
          this.$emit('close')
          this.$loadingWrap.show()
        } else {
          this.$Error(res.msg)
          this.$loadingWrap.close()
        }
      })
    }
  }
}
</script>

<style lang="scss">
.add-medicine-man-container {
  .medicine-man-container {
    width: 100%;
    height: 100%;
    overflow: auto;
    background: #f5f5f5;
    padding: 100px 0 80px;
    box-sizing: border-box;
    .header {
      width: 100%;
      height: 100px;
      line-height: 94px;
      background: #fff;
      border-bottom: 2px solid #f5f5f5;
      text-align: center;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 10;
      .btn-back {
        position: absolute;
        left: 0;
        top: 0;
        display: block;
        width: 80px;
        height: 94px;
        padding-top: 4px;
        .icon-back{
          border: solid #666;
          border-width: 0 3px 3px 0;
          display: inline-block;
          padding: 8px;
          transform: rotate(135deg);
          -webkit-transform: rotate(135deg);
        }
      }
      .icon-backg {
        font-size: 40px;
      }
      span {
        font-size: 32px;
      }
    }
    .content-container {
      margin: 20px;
      background: #fff;
    }
    .msettlement_sub {
      position: absolute;
      display: flex;
      .btn {
        flex: 1;
        line-height: 72px;
        color: #fff;
        font-size: 32px;
        font-weight: bold;
        text-align: center;
        &.return-btn {
          background: rgb(254, 147, 3);
          border-radius: 0px 50px 50px 0;
        }
        &.gra-btn {
          background: #FE5500;
          border-radius: 50px 0 0 50px;
        }
      }
    }
  }
  .medicine-man-info {
    background: #fff;
    width: 100%;
    overflow: hidden;
    .medicine-man-info-line {
      border-bottom: 1px solid #ededed;
      padding: 0 30px;
      width: 100%;
      font-size: 32px;
      box-sizing: border-box;
      .medicine-man-info-form {
        display: flex;
        width: 100%;
        .freight-radio-box{
          display: flex;
          align-items: center;
          position: absolute;
          &.right {
            right: 0;
          }
          .freight-radio{
            width: 100px;
            height: 96px;
            display: flex;
            margin-right: 30px;
            font-size: 26px;
            color: #999;
            .van-radio__icon  {
              height: 1em !important;
              .van-icon {
                width: 1.25em;
                height: 1.25em;
                font-size: .8em;
                line-height: 1.25em;
              }
            }
          }
        }
        .cell-label {
          float: left;
          width: 30%;
          line-height: 96px;
          font-size: 28px;
          color: #333333;
          position: relative;
          label {
            position: absolute;
            left: -6px;
            transform: translateX(-100%);
          }
        }
        .cell-value {
          float: right;
          width: 70%;
          padding-right:10px;
          position: relative;
          font-size: 26px;
          color: #666666;
          line-height: 96px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          input {
            display: block;
            width: 100%;
            font-size: 26px;
            color: #666666;
            border: 0;
            padding: 20px 0;
            height: 96px;
            background: transparent;
          }
          .wx-birthday {
            line-height: 96px;
          }
        }
        &.login-line-verify {
          display: flex;
          align-items: center;
          .msg-verify-input {
            width: 50%;
          }
          .msg-verify-btn {
            display: inline-block;
            // width:45%;
            height: 56px;
            line-height: 56px;
            text-align: center;
            padding: 0 10px;
            border-radius: 6px;
            font-size: 28px;
            background: #ff7d00;
            color: #fff;
          }
        }
      }
    }
  }
  .add-diseases-history {
    padding: 100px 12px calc(100px + constant(safe-area-inset-bottom));
    padding: 100px 12px calc(100px + env(safe-area-inset-bottom));
    .title {
      width: 100%;
      height: 100px;
      font-size: 32px;
      color: #333;
      line-height: 100px;
      text-align: center;
      border-bottom: solid 1px #e5e5e5;
      font-weight: 600;
      position: absolute;
      top: 0;
      left: 0;
      background: #fff;
    }
    .medicine-man-info {
      height: 100%;
      overflow: auto;
    }
    .adaptation-disease-wrapper {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      .adaptation-disease {
        line-height: 52px;
        font-size: 24px;
        padding: 0px 24px;
        border: solid #999 1px;
        border-radius: 50px;
        margin-right: 20px;
        margin-bottom: 15px;
        &.selected {
          border-color: #FE5500;
          color: #FE5500;
        }
      }
      .add-adaptation-disease {
        height: 52px;
        line-height: 52px;
        font-size: 45px;
        padding: 0px 30px;
        background: #eee;
        border-radius: 50px;
        color: #aaa;
        margin-bottom: 15px;
      }
    }
    .btn-add-disease {
      width: 90%;
      // height: 70px;
      position: absolute;
      padding: 11px 30px;
      left: 50%;
      border-radius: 40px;
      background: #FE5500;
      text-align: center;
      color: #fff;
      line-height: 70px;
      transform: translateX(-50%);
      font-size: 32px;
      bottom: constant(safe-area-inset-bottom);
      bottom: env(safe-area-inset-bottom);
    }
    .picker-release {
      .relation-list {
        font-size: 28px;
        padding: 30px 0;
        text-align: center;
        border-bottom: 1px solid #f3f3f3;
        &.color {
          color: #FE5500
        }
      }
    }
  }
  .add_disease {
    padding: 0 12px;
    .title {
      height: 100px;
      font-size: 32px;
      color: #333;
      line-height: 100px;
      text-align: center;
      border-bottom: solid 1px #e5e5e5;
      font-weight: 600;
    }
    .input-cell {
      height: 80px;
      border-bottom: solid 1px #e5e5e5;
      input {
        width: 100%;
        height: 100%;
        font-size: 28px;
        padding-left: 20px;
        box-sizing: border-box;
      }
    }
    .btn-add-disease {
      width: 90%;
      height: 70px;
      position: absolute;
      bottom: constant(safe-area-inset-bottom);
      bottom: env(safe-area-inset-bottom);
      left: 50%;
      border-radius: 40px;
      background: #FE5500;
      text-align: center;
      color: #fff;
      line-height: 70px;
      transform: translateX(-50%);
      font-size: 32px;
    }
  }
}
</style>